import { Directive, HostListener, Input, ElementRef, Renderer2 } from '@angular/core';
import { Event } from '@angular/router';

@Directive({
  selector: '[app-draggable][draggedClass]'
})
export class DraggableDirective {
  @Input()
  draggedClass: string = 'app-draggable';
  _isDragged = false;
  @Input('app-draggable')
  setisDragged(val) {
    this._isDragged = val;
  }
  getisDragged() {
    return this._isDragged;
  }
  @HostListener('dragstart', ['$event'])
  onDragStart(e) {
    if (this.el.nativeElement == e.target) {
      this.rd.addClass(this.el.nativeElement, this.draggedClass);
      this.rd.setAttribute(this.el.nativeElement, 'app-draggable', `${this._isDragged}`);
    }
  }
  @HostListener('dragend', ['$event'])
  onDragEnd(e) {
    if (this.el.nativeElement == e.target) {
      this.rd.removeClass(this.el.nativeElement, this.draggedClass);
    }
  }
  constructor(private el: ElementRef,
    private rd :Renderer2
  ) { }

}
